<template>
	<rui-pages>
		<rui-card>
			<view class="incubator">
				<view class="incubator_item" v-for="index in 8" :key="index">
					<view class="incubator_item_box" :class="index == 2 || index == 7?'ing':''">
						<view class="incubator_item_box_number">
							{{index}}
						</view>
						<view class="incubator_item_box_status">
							无培养
						</view>
					</view>
					<view class="incubator_item_timing">0</view>
					<view class="incubator_item_text">
						拔出计时
					</view>
					<view class="incubator_item_countdown" :class="index == 2 || index == 7?'countdown':''">
						<view class="incubator_item_countdown_item">
							00
						</view>
						<view class="incubator_item_countdown_dd">
							:
						</view>
						<view class="incubator_item_countdown_item">
							00
						</view>
						<view class="incubator_item_countdown_dd">
							:
						</view>
						<view class="incubator_item_countdown_item">
							00
						</view>
					</view>
					<view class="incubator_item_text">
						培养倒计时
					</view>
				</view>
			</view>

		</rui-card>
		<view style="margin-top: 20px;">
			<view class="info">
				<view class="info_left">
					<view class="info_item">
						<view class="info_item_label">
							当前温度
						</view>
						<view class="info_item_content">
							30℃
						</view>
					</view>
					<view class="info_item">
						<view class="info_item_label">
							培养时间
						</view>
						<view class="info_item_content">
							3时10分
						</view>
					</view>
					<view class="info_item">
						<view class="info_item_label">
							本机编号
						</view>
						<view class="info_item_content">
							DS12SDF333
						</view>
					</view>
				</view>
				<view class="info_right">
					<view class="info_item">
						<view class="info_item_label">
							培养加热
						</view>
						<view class="info_item_content">
							<switch />
						</view>
					</view>
				</view>
			</view>
		</view>
	</rui-pages>
</template>

<script>

</script>

<style lang="scss" scoped>
	.info {
		display: flex;
		justify-content: space-between;

		&_item {
			display: flex;
			align-items: center;
			margin: 10px;

			&_label {
				// width: 100px;
				text-align: right;
				margin-right: 10px;
				color: #999;

				&::after {
					content: ":";
				}
			}
		}
	}

	.incubator {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		text-align: center;

		.ing {
			background: linear-gradient(to bottom, #fce487, #ecc83c) !important;
		}

		.done {
			background: linear-gradient(to bottom, #fb7c7d, #ff5253) !important;
		}

		.countdown {
			background: #ecc83c !important;
		}


		&_item {
			border-radius: 20px;
			padding: 30px 0;

			&:nth-child(odd) {
				background: var(--bg);
			}

			&_text {
				font-size: 14px;
				color: #999;
				margin-top: 5px;
			}

			&_countdown {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6px;
				height: 35px;
				line-height: 35px;
				padding: 0 5px;
				width: 100px;
				margin: 40px auto 0;
				background: #bbb;

				&_dd {
					color: #fff;
				}

				&_item {
					color: #fff;
					margin: 2px;
					font-size: 20px;
				}

			}

			&_timing {
				font-size: 26px;

				&::after {
					content: "s";
					font-size: 14px;
					color: #999;
				}
			}

			&_box {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: linear-gradient(to bottom, #c5d1db, #c7d1de);
				margin: 0 auto;
				// line-height: 100px;
				color: #fff;
				margin-bottom: 20px;
				box-shadow:
					0 1px 0 rgba(255, 255, 255, 0.3),
					0 -1px 0 rgba(0, 0, 0, 0.1),
					0 -2px 0 rgba(0, 0, 0, 0.3);

				&_number {
					font-size: 38px;
					font-weight: bold;
					padding-top: 20px;
				}

				&_status {
					font-size: 14px;
				}

			}
		}
	}
</style>